{# templates/pos/dash_automotive.html #}
{# Automotive POS Dashboard: Workshop + Installments + Finance #}
{# Included inside index.html when pos_type == "automotive" #}

<style>
/* ══════════════════════════════════════════════════════════════════
   AUTOMOTIVE DASHBOARD  —  v1.0
   ══════════════════════════════════════════════════════════════════ */
:root {
  --au-blue:    #0056b3;
  --au-blue2:   #0077cc;
  --au-green:   #16a34a;
  --au-red:     #dc2626;
  --au-amber:   #d97706;
  --au-purple:  #7c3aed;
  --au-cyan:    #0891b2;
  --au-orange:  #ea580c;
  --au-rose:    #be185d;
  --au-teal:    #0d9488;
  --au-slate:   #475569;
  --au-border:  rgba(15,23,42,.08);
  --au-bg:      #f0f4f9;
  --au-card:    #ffffff;
  --au-radius:  12px;
  --au-shadow:  0 4px 16px rgba(2,6,23,.07);
  --au-shadow2: 0 8px 28px rgba(2,6,23,.11);
}

/* ── KPI Cards ─────────────────────────────────────────────── */
.au-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .5rem;
  margin-bottom: .7rem;
}
.au-kpi {
  background: var(--au-card);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  padding: .65rem .8rem;
  box-shadow: var(--au-shadow);
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  cursor: default;
}
.au-kpi:hover { transform: translateY(-2px); box-shadow: var(--au-shadow2); }
.au-kpi::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%;
}
.au-kpi.c-blue::before   { background: var(--au-blue); }
.au-kpi.c-green::before  { background: var(--au-green); }
.au-kpi.c-red::before    { background: var(--au-red); }
.au-kpi.c-amber::before  { background: var(--au-amber); }
.au-kpi.c-purple::before { background: var(--au-purple); }
.au-kpi.c-cyan::before   { background: var(--au-cyan); }
.au-kpi.c-orange::before { background: var(--au-orange); }
.au-kpi.c-rose::before   { background: var(--au-rose); }
.au-kpi.c-teal::before   { background: var(--au-teal); }
.au-kpi.c-slate::before  { background: var(--au-slate); }

.au-kpi-top  { display:flex; justify-content:space-between; align-items:flex-start; }
.au-kpi-icon {
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
}
.c-blue   .au-kpi-icon { background:rgba(0,86,179,.1);    color:var(--au-blue); }
.c-green  .au-kpi-icon { background:rgba(22,163,74,.1);   color:var(--au-green); }
.c-red    .au-kpi-icon { background:rgba(220,38,38,.1);   color:var(--au-red); }
.c-amber  .au-kpi-icon { background:rgba(217,119,6,.1);   color:var(--au-amber); }
.c-purple .au-kpi-icon { background:rgba(124,58,237,.1);  color:var(--au-purple); }
.c-cyan   .au-kpi-icon { background:rgba(8,145,178,.1);   color:var(--au-cyan); }
.c-orange .au-kpi-icon { background:rgba(234,88,12,.1);   color:var(--au-orange); }
.c-rose   .au-kpi-icon { background:rgba(190,24,93,.1);   color:var(--au-rose); }
.c-teal   .au-kpi-icon { background:rgba(13,148,136,.1);  color:var(--au-teal); }
.c-slate  .au-kpi-icon { background:rgba(71,85,105,.1);   color:var(--au-slate); }

.au-kpi-label { font-size:.63rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.3px; margin-top:.4rem; }
.au-kpi-value { font-size:1.05rem; font-weight:900; color:#0f172a; margin-top:.1rem; line-height:1.2; }
.au-kpi-sub   { font-size:.66rem; color:#94a3b8; margin-top:.06rem; }

/* ── Section labels ─────────────────────────────────────────── */
.au-sec {
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:800; color:#475569;
  text-transform:uppercase; letter-spacing:.5px;
  margin:.75rem 0 .4rem;
}
.au-sec::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,#e2e8f0,transparent);
}
.au-sec-icon {
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff;
}

/* ── Cards ──────────────────────────────────────────────────── */
.au-card {
  background:var(--au-card);
  border:1px solid var(--au-border);
  border-radius:var(--au-radius);
  box-shadow:var(--au-shadow);
}
.au-card-hd {
  padding:.6rem .9rem;
  border-bottom:1px solid var(--au-border);
  font-size:.73rem; font-weight:700; color:#334155;
  display:flex; align-items:center; gap:.4rem;
}
.au-card-bd { padding:.7rem .9rem; }

/* ── Charts ─────────────────────────────────────────────────── */
.au-chart-wrap { position:relative; height:200px; }

/* ── Tables ─────────────────────────────────────────────────── */
.au-tbl { width:100%; border-collapse:collapse; font-size:.78rem; }
.au-tbl th {
  font-size:.65rem; font-weight:800; color:#64748b;
  text-transform:uppercase; letter-spacing:.3px;
  padding:.4rem .55rem; border-bottom:2px solid #e2e8f0;
  background:#f8fafc; white-space:nowrap;
}
.au-tbl td {
  padding:.38rem .55rem; border-bottom:1px solid #f1f5f9;
  color:#1e293b; vertical-align:middle;
}
.au-tbl tbody tr:hover td { background:#f8fafc; }
.au-tbl tbody tr:last-child td { border-bottom:none; }

/* ── Badges ─────────────────────────────────────────────────── */
.au-badge {
  display:inline-flex; align-items:center;
  border-radius:20px; font-size:.63rem; font-weight:700;
  padding:2px 8px; white-space:nowrap;
}
.ab-draft    { background:#f1f5f9; color:#475569; }
.ab-prog     { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.ab-ready    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.ab-invoiced { background:#dcfce7; color:#15803d; border:1px solid #86efac; }
.ab-cash     { background:#f0fdf4; color:#166534; }
.ab-credit   { background:#eff6ff; color:#1d4ed8; }
.ab-corp     { background:#f0f9ff; color:#0369a1; }
.ab-ins      { background:#f0fdfa; color:#0f766e; }
.ab-comp     { background:#fff7ed; color:#c2410c; }
.ab-overdue  { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
.ab-due      { background:#fef3c7; color:#b45309; border:1px solid #fcd34d; }
.ab-pending  { background:#f8fafc; color:#475569; border:1px solid #e2e8f0; }
.ab-active   { background:#dcfce7; color:#15803d; border:1px solid #86efac; }

/* ── Progress bar ────────────────────────────────────────────── */
.au-prog { height:6px; border-radius:4px; background:#e2e8f0; overflow:hidden; margin-top:4px; }
.au-prog-bar { height:100%; border-radius:4px; transition:width .4s ease; }

/* ── Aging pills ─────────────────────────────────────────────── */
.au-aging-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.au-aging-pill {
  border-radius:10px; padding:.5rem .6rem; text-align:center;
  border:1px solid transparent;
}
.au-aging-pill .val { font-size:.88rem; font-weight:800; }
.au-aging-pill .lbl { font-size:.62rem; color:#64748b; margin-top:1px; }

/* ── Spinner ─────────────────────────────────────────────────── */
.au-spin {
  display:inline-block; width:16px; height:16px;
  border:2px solid #e2e8f0; border-top-color:#0056b3;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Overdue highlight ───────────────────────────────────────── */
.row-overdue td { background:#fff5f5 !important; }
.row-overdue:hover td { background:#fee2e2 !important; }
.row-due td { background:#fffbeb !important; }
.row-due:hover td { background:#fef3c7 !important; }
</style>

<div class="d-flex align-items-center gap-2 flex-wrap mb-3">
  <span style="font-size:.75rem;font-weight:700;color:#475569;letter-spacing:.3px;text-transform:uppercase;">
    <i class="bi bi-speedometer2 me-1"></i>Automotive Dashboard
  </span>
  <div class="ms-auto d-flex gap-2 align-items-center flex-wrap">
    <div class="input-group input-group-sm" style="width:auto;">
      <span class="input-group-text" style="font-size:.75rem;">From</span>
      <input type="date" id="auDateFrom" class="form-control form-control-sm" style="width:135px;font-size:.8rem;">
    </div>
    <div class="input-group input-group-sm" style="width:auto;">
      <span class="input-group-text" style="font-size:.75rem;">To</span>
      <input type="date" id="auDateTo" class="form-control form-control-sm" style="width:135px;font-size:.8rem;">
    </div>
    <button class="btn btn-sm btn-primary" onclick="auRefreshAll()" style="font-size:.78rem;border-radius:8px;">
      <i class="bi bi-arrow-clockwise me-1"></i>Refresh
    </button>
    <a href="{% url 'workshop:job_list' %}" class="btn btn-sm btn-outline-secondary" style="font-size:.78rem;border-radius:8px;">
      <i class="bi bi-tools me-1"></i>Jobs
    </a>
  </div>
</div>

<div class="au-sec">
  <div class="au-sec-icon" style="background:var(--au-blue);"><i class="bi bi-tools"></i></div>
  Workshop
</div>

<div class="au-kpi-grid" id="auWorkshopKpis">
  {% for i in "12345678" %}
  <div class="au-kpi c-blue">
    <div class="au-kpi-top"><div></div><div class="au-spin"></div></div>
    <div class="au-kpi-label">Loading...</div>
    <div class="au-kpi-value">—</div>
  </div>
  {% endfor %}
</div>

<div class="au-sec">
  <div class="au-sec-icon" style="background:var(--au-purple);"><i class="bi bi-calendar-check"></i></div>
  Installments
</div>

<div class="au-kpi-grid" id="auInstKpis">
  {% for i in "12345" %}
  <div class="au-kpi c-purple">
    <div class="au-kpi-top"><div></div><div class="au-spin"></div></div>
    <div class="au-kpi-label">Loading...</div>
    <div class="au-kpi-value">—</div>
  </div>
  {% endfor %}
</div>

<div class="au-sec">
  <div class="au-sec-icon" style="background:var(--au-green);"><i class="bi bi-bank"></i></div>
  Financials
</div>

<div class="au-kpi-grid" id="auFinKpis">
  {% for i in "1234" %}
  <div class="au-kpi c-green">
    <div class="au-kpi-top"><div></div><div class="au-spin"></div></div>
    <div class="au-kpi-label">Loading...</div>
    <div class="au-kpi-value">—</div>
  </div>
  {% endfor %}
</div>

<div class="au-sec">
  <div class="au-sec-icon" style="background:var(--au-cyan);"><i class="bi bi-graph-up"></i></div>
  Revenue & Breakdown
</div>

<div class="row g-2 mb-2">
  {# Revenue Chart #}
  <div class="col-lg-7">
    <div class="au-card h-100">
      <div class="au-card-hd">
        <i class="bi bi-graph-up-arrow" style="color:var(--au-blue);"></i>
        Daily Revenue — Workshop + Installments
        <div class="ms-auto au-spin" id="chartSpin"></div>
      </div>
      <div class="au-card-bd">
        <div class="au-chart-wrap" style="height:190px;">
          <canvas id="auRevenueChart"></canvas>
        </div>
      </div>
    </div>
  </div>

  {# Jobs Breakdown #}
  <div class="col-lg-5">
    <div class="row g-2 h-100">
      <div class="col-12">
        <div class="au-card">
          <div class="au-card-hd">
            <i class="bi bi-pie-chart" style="color:var(--au-amber);"></i>
            Jobs by Status (All-time)
            <div class="ms-auto au-spin" id="statusSpin"></div>
          </div>
          <div class="au-card-bd d-flex gap-3 align-items-center">
            <div style="width:100px;height:100px;flex-shrink:0;">
              <canvas id="auStatusChart"></canvas>
            </div>
            <div id="auStatusLegend" style="font-size:.75rem;flex:1;"></div>
          </div>
        </div>
      </div>
      <div class="col-12">
        <div class="au-card">
          <div class="au-card-hd">
            <i class="bi bi-bar-chart-horizontal" style="color:var(--au-teal);"></i>
            Billing Mix — {{ request.GET.from|default:"This Month" }}
          </div>
          <div class="au-card-bd" id="auBillingBars" style="font-size:.76rem;">
            <div class="au-spin"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="au-sec">
  <div class="au-sec-icon" style="background:var(--au-red);"><i class="bi bi-clock-history"></i></div>
  Outstanding Receivables
</div>

<div class="row g-2 mb-2">
  {# Workshop Outstanding #}
  <div class="col-lg-8">
    <div class="au-card">
      <div class="au-card-hd">
        <i class="bi bi-tools" style="color:var(--au-orange);"></i>
        Workshop Credit / Insurance / Corporate — Unpaid
        <div class="ms-auto" id="outstandSummary" style="font-size:.7rem;color:#64748b;"></div>
      </div>
      <div class="au-card-bd p-0">
        <div class="au-aging-grid p-2 pb-1" id="auAgingWs">
          <div class="au-aging-pill" style="background:#dcfce7;border-color:#86efac;">
            <div class="val" style="color:#15803d;" id="ag030">—</div>
            <div class="lbl">0–30 Days</div>
          </div>
          <div class="au-aging-pill" style="background:#fef3c7;border-color:#fcd34d;">
            <div class="val" style="color:#b45309;" id="ag3160">—</div>
            <div class="lbl">31–60 Days</div>
          </div>
          <div class="au-aging-pill" style="background:#fee2e2;border-color:#fca5a5;">
            <div class="val" style="color:#b91c1c;" id="ag60p">—</div>
            <div class="lbl">60+ Days</div>
          </div>
        </div>
        <div style="overflow-x:auto;max-height:240px;overflow-y:auto;">
          <table class="au-tbl" id="auOutstandingTable">
            <thead>
              <tr>
                <th>Job</th><th>Date</th><th>Vehicle</th>
                <th>Customer</th><th>Type</th>
                <th class="text-end">Billed</th>
                <th class="text-end">Received</th>
                <th class="text-end">Outstanding</th>
                <th class="text-center">Days</th>
              </tr>
            </thead>
            <tbody id="auOutstandingBody">
              <tr><td colspan="9" class="text-center py-3"><div class="au-spin"></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  {# Installment Aging #}
  <div class="col-lg-4">
    <div class="au-card h-100">
      <div class="au-card-hd">
        <i class="bi bi-calendar-x" style="color:var(--au-red);"></i>
        Installment Aging
      </div>
      <div class="au-card-bd">
        <div class="au-aging-grid mb-2" id="auInstAging">
          <div class="au-aging-pill" style="background:#dcfce7;border-color:#86efac;">
            <div class="val" style="color:#15803d;" id="iag030">—</div>
            <div class="lbl">0–30 Days</div>
          </div>
          <div class="au-aging-pill" style="background:#fef3c7;border-color:#fcd34d;">
            <div class="val" style="color:#b45309;" id="iag3160">—</div>
            <div class="lbl">31–60 Days</div>
          </div>
          <div class="au-aging-pill" style="background:#fee2e2;border-color:#fca5a5;">
            <div class="val" style="color:#b91c1c;" id="iag60p">—</div>
            <div class="lbl">60+ Days</div>
          </div>
        </div>

        <div style="font-size:.73rem;font-weight:700;color:#475569;text-transform:uppercase;margin:.6rem 0 .3rem;">
          Due Today <span class="badge bg-warning text-dark ms-1" id="dueTodayCount">0</span>
        </div>
        <div id="dueTodayList" style="max-height:100px;overflow-y:auto;font-size:.76rem;">
          <div class="au-spin"></div>
        </div>

        <div style="font-size:.73rem;font-weight:700;color:#475569;text-transform:uppercase;margin:.6rem 0 .3rem;">
          Overdue <span class="badge bg-danger ms-1" id="overdueCount">0</span>
        </div>
        <div id="overdueList" style="max-height:130px;overflow-y:auto;font-size:.76rem;">
          <div class="au-spin"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="au-sec">
  <div class="au-sec-icon" style="background:var(--au-slate);"><i class="bi bi-activity"></i></div>
  Recent Activity
</div>

<div class="row g-2">
  {# Recent Jobs #}
  <div class="col-lg-5">
    <div class="au-card">
      <div class="au-card-hd">
        <i class="bi bi-car-front" style="color:var(--au-blue);"></i>
        Recent Workshop Jobs
        <a href="{% url 'workshop:job_list' %}" class="ms-auto" style="font-size:.68rem;color:var(--au-blue);">View all →</a>
      </div>
      <div style="overflow-x:auto;max-height:290px;overflow-y:auto;">
        <table class="au-tbl" id="auRecentJobsTable">
          <thead>
            <tr>
              <th>Job</th><th>Reg No</th><th>Billing</th>
              <th>Status</th><th class="text-end">Amount</th>
            </tr>
          </thead>
          <tbody id="auRecentJobsBody">
            <tr><td colspan="5" class="text-center py-3"><div class="au-spin"></div></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# Recent Installment Payments #}
  <div class="col-lg-4">
    <div class="au-card">
      <div class="au-card-hd">
        <i class="bi bi-cash-coin" style="color:var(--au-green);"></i>
        Recent Installment Collections
        {% if perms.installments %}
        <a href="{% url 'installments:payment_collection' %}" class="ms-auto" style="font-size:.68rem;color:var(--au-green);">View all →</a>
        {% endif %}
      </div>
      <div style="overflow-x:auto;max-height:290px;overflow-y:auto;">
        <table class="au-tbl" id="auRecentPmtsTable">
          <thead>
            <tr>
              <th>Deal</th><th>Customer</th>
              <th>Date</th><th class="text-end">Amount</th>
            </tr>
          </thead>
          <tbody id="auRecentPmtsBody">
            <tr><td colspan="4" class="text-center py-3"><div class="au-spin"></div></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# Top Customers by AR #}
  <div class="col-lg-3">
    <div class="au-card">
      <div class="au-card-hd">
        <i class="bi bi-person-lines-fill" style="color:var(--au-rose);"></i>
        Top AR — Customers
      </div>
      <div class="au-card-bd p-0">
        <div id="auTopArList" style="font-size:.76rem;max-height:290px;overflow-y:auto;">
          <div class="text-center py-3"><div class="au-spin"></div></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="au-sec mt-2">
  <div class="au-sec-icon" style="background:var(--au-teal);"><i class="bi bi-person-badge"></i></div>
  Advisor Performance — Selected Period
</div>

<div class="au-card mb-2">
  <div class="au-card-hd">
    <i class="bi bi-trophy" style="color:var(--au-amber);"></i>
    Revenue by Service Advisor
  </div>
  <div class="au-card-bd" id="auAdvisorBars" style="font-size:.76rem;">
    <div class="au-spin"></div>
  </div>
</div>

<script>
// ── Globals ──────────────────────────────────────────────────────
const AU_URLS = {
  summary:      "{% url 'pos:auto_dash_summary' %}",
  chart:        "{% url 'pos:auto_dash_chart' %}",
  jobs:         "{% url 'pos:auto_dash_jobs' %}",
  outstanding:  "{% url 'pos:auto_dash_outstanding' %}",
  installments: "{% url 'pos:auto_dash_installments' %}",
  recent:       "{% url 'pos:auto_dash_recent' %}",
  customers:    "{% url 'pos:auto_dash_customers' %}",
};

// Detect currency locale (PKR)
const FMT = n => {
  const v = parseFloat(n || 0);
  if (v === 0) return "—";
  if (v >= 1_000_000) return (v/1_000_000).toFixed(1) + "M";
  if (v >= 100_000)   return (v/1_000).toFixed(0) + "K";
  return Math.round(v).toLocaleString("en-PK");
};
const FMTF = n => Math.round(parseFloat(n||0)).toLocaleString("en-PK");

// Status labels and colours
const STATUS_META = {
  draft:       { label:"Draft",       cls:"ab-draft",    chart:"#94a3b8" },
  in_progress: { label:"In Progress", cls:"ab-prog",     chart:"#f59e0b" },
  ready:       { label:"Ready",       cls:"ab-ready",    chart:"#3b82f6" },
  invoiced:    { label:"Invoiced",    cls:"ab-invoiced", chart:"#22c55e" },
};
const BILLING_META = {
  cash:          { label:"Cash",          cls:"ab-cash",   color:"#16a34a" },
  credit:        { label:"Credit",        cls:"ab-credit", color:"#2563eb" },
  corporate:     { label:"Corporate",     cls:"ab-corp",   color:"#0891b2" },
  insurance:     { label:"Insurance",     cls:"ab-ins",    color:"#0d9488" },
  complimentary: { label:"Complimentary", cls:"ab-comp",   color:"#ea580c" },
};

let auRevenueChart = null;
let auStatusChart  = null;

// ── Date range helpers ────────────────────────────────────────────
function auGetRange() {
  const f = document.getElementById("auDateFrom").value;
  const t = document.getElementById("auDateTo").value;
  return f && t ? "from=" + f + "&to=" + t : "";
}
function auInitDates() {
  const today = new Date();
  const yyyy  = today.getFullYear();
  const mm    = String(today.getMonth() + 1).padStart(2, "0");
  const dd    = String(today.getDate()).padStart(2, "0");
  document.getElementById("auDateTo").value   = yyyy + "-" + mm + "-" + dd;
  document.getElementById("auDateFrom").value = yyyy + "-" + mm + "-01";
}

// ── KPI card builder ─────────────────────────────────────────────
function auKpiCard(icon, label, value, sub, color) {
  return `<div class="au-kpi c-${color}">
    <div class="au-kpi-top">
      <div></div>
      <div class="au-kpi-icon"><i class="bi bi-${icon}"></i></div>
    </div>
    <div class="au-kpi-label">${label}</div>
    <div class="au-kpi-value">${value}</div>
    ${sub ? `<div class="au-kpi-sub">${sub}</div>` : ""}
  </div>`;
}

// ── LOAD SUMMARY ─────────────────────────────────────────────────
async function auLoadSummary() {
  const res  = await fetch(AU_URLS.summary + "?" + auGetRange());
  const data = await res.json();
  const ws   = data.workshop;
  const inst = data.installments;
  const fin  = data.finance;

  // Workshop KPIs
  const wsHtml = [
    auKpiCard("tools",          "Active Jobs",      ws.active_jobs,                "All open",                    "blue"),
    auKpiCard("calendar-day",   "Today's Jobs",     ws.today_jobs,                 "Checked in today",            "cyan"),
    auKpiCard("graph-up-arrow", "Month Revenue",    FMT(ws.total_revenue),         "Parts + Labour",              "green"),
    auKpiCard("box-seam",       "Parts Revenue",    FMT(ws.parts_revenue),         "+Tax " + FMT(ws.parts_tax),   "amber"),
    auKpiCard("wrench-adjustable","Labour Revenue", FMT(ws.labour_revenue),        "+Tax " + FMT(ws.labour_tax),  "teal"),
    auKpiCard("percent",        "Total Tax",        FMT(ws.parts_tax + ws.labour_tax), "GST + PST",              "slate"),
    auKpiCard("tag",            "Discount Given",   FMT(ws.total_discount),        "Period total",                "rose"),
    auKpiCard("clock-history",  "Workshop O/S",     FMT(ws.workshop_outstanding),  "Credit/Ins/Corp unpaid",      "red"),
  ].join("");
  document.getElementById("auWorkshopKpis").innerHTML = wsHtml;

  // Installment KPIs
  const instHtml = [
    auKpiCard("calendar-check",  "Active Deals",      inst.active_deals,            "Ongoing installments",        "purple"),
    auKpiCard("currency-dollar", "Total Financed",    FMT(inst.total_financed),     "Pending receivable",          "purple"),
    auKpiCard("check-circle",    "This Month Coll.",  FMT(inst.month_collected),    "Installments received",       "green"),
    auKpiCard("exclamation-triangle","Overdue Amount",FMT(inst.overdue_amount),     inst.overdue_count + " slots overdue", "red"),
    auKpiCard("list-check",      "Total Pending",     FMT(inst.total_pending),      "All future slots",            "amber"),
  ].join("");
  document.getElementById("auInstKpis").innerHTML = instHtml;

  // Finance KPIs
  const finHtml = [
    auKpiCard("person-check",   "Customer AR",   FMT(fin.cust_ar),  "Customers owe us",         "green"),
    auKpiCard("person-dash",    "Customer AP",   FMT(fin.cust_ap),  "We owe customers",         "rose"),
    auKpiCard("building",       "Vendor AP",     FMT(fin.vend_ap),  "Payable to vendors",       "red"),
    auKpiCard("bank",           "Bank Balance",  FMT(fin.bank_bal), "All accounts total",       "blue"),
  ].join("");
  document.getElementById("auFinKpis").innerHTML = finHtml;
}

// ── LOAD REVENUE CHART ────────────────────────────────────────────
async function auLoadChart() {
  document.getElementById("chartSpin").style.display = "";
  const res  = await fetch(AU_URLS.chart + "?" + auGetRange());
  const data = await res.json();
  document.getElementById("chartSpin").style.display = "none";

  const ctx = document.getElementById("auRevenueChart").getContext("2d");
  if (auRevenueChart) auRevenueChart.destroy();

  // Abbreviate labels
  const labels = data.labels.map(d => {
    const parts = d.split("-");
    return parts[2] + "/" + parts[1];
  });

  auRevenueChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels,
      datasets: [
        {
          label: "Parts",
          data:  data.parts,
          backgroundColor: "rgba(0,86,179,.65)",
          borderRadius: 3,
          order: 1,
        },
        {
          label: "Labour",
          data:  data.labour,
          backgroundColor: "rgba(13,148,136,.65)",
          borderRadius: 3,
          order: 2,
        },
        {
          label: "Inst.Coll.",
          data:  data.inst_coll,
          type:  "line",
          borderColor: "#7c3aed",
          backgroundColor: "rgba(124,58,237,.08)",
          fill: true,
          tension: 0.35,
          pointRadius: 2,
          borderWidth: 1.5,
          order: 0,
        },
      ],
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { labels: { font: { size: 10 } } } },
      scales: {
        x: { stacked: true, ticks: { font: { size: 9 }, maxTicksLimit: 14 }, grid: { display: false } },
        y: { stacked: true, ticks: { font: { size: 9 }, callback: v => FMT(v) }, grid: { color: "#f1f5f9" } },
      },
    },
  });
}

// ── LOAD JOBS BREAKDOWN ───────────────────────────────────────────
async function auLoadJobs() {
  const res  = await fetch(AU_URLS.jobs + "?" + auGetRange());
  const data = await res.json();
  document.getElementById("statusSpin").style.display = "none";

  // Status donut
  const sLabels = data.by_status.map(r => STATUS_META[r.status]?.label || r.status);
  const sData   = data.by_status.map(r => r.count);
  const sCols   = data.by_status.map(r => STATUS_META[r.status]?.chart || "#94a3b8");

  const ctx2 = document.getElementById("auStatusChart").getContext("2d");
  if (auStatusChart) auStatusChart.destroy();
  auStatusChart = new Chart(ctx2, {
    type: "doughnut",
    data: { labels: sLabels, datasets: [{ data: sData, backgroundColor: sCols, borderWidth: 0 }] },
    options: {
      responsive: true, maintainAspectRatio: true,
      plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ctx.label + ": " + ctx.raw } } },
      cutout: "68%",
    },
  });

  // Status legend
  const legendHtml = data.by_status.map(r => {
    const m = STATUS_META[r.status] || {};
    return `<div class="d-flex align-items-center justify-content-between mb-1">
      <span><span class="au-badge ${m.cls || "ab-draft"}">${m.label || r.status}</span></span>
      <span class="fw-bold">${r.count}</span>
    </div>`;
  }).join("");
  document.getElementById("auStatusLegend").innerHTML = legendHtml;

  // Billing mix bars
  const totalBillingRev = data.by_billing.reduce((a, r) => a + r.revenue, 0) || 1;
  const billingHtml = data.by_billing.map(r => {
    const m   = BILLING_META[r.billing] || { label: r.billing, color: "#64748b", cls: "ab-draft" };
    const pct = Math.round(r.revenue / totalBillingRev * 100);
    return `<div class="mb-2">
      <div class="d-flex justify-content-between mb-1">
        <span><span class="au-badge ${m.cls}">${m.label}</span>
          <span class="ms-1 text-muted" style="font-size:.65rem;">${r.count} jobs</span></span>
        <span class="fw-bold" style="font-size:.76rem;">${FMT(r.revenue)}</span>
      </div>
      <div class="au-prog">
        <div class="au-prog-bar" style="width:${pct}%;background:${m.color};"></div>
      </div>
    </div>`;
  }).join("");
  document.getElementById("auBillingBars").innerHTML = billingHtml || "<span class='text-muted small'>No data</span>";

  // Advisor performance bars
  const maxAdRev = Math.max(...data.by_advisor.map(r => r.rev), 1);
  const advisorHtml = data.by_advisor.map(r => {
    const pct = Math.round(r.rev / maxAdRev * 100);
    return `<div class="mb-2">
      <div class="d-flex justify-content-between mb-1">
        <span style="font-weight:600;">${r.name}</span>
        <span class="fw-bold" style="color:var(--au-blue);">${FMT(r.rev)} &nbsp;
          <span class="text-muted fw-normal">${r.cnt} jobs</span></span>
      </div>
      <div class="au-prog">
        <div class="au-prog-bar" style="width:${pct}%;background:var(--au-blue);"></div>
      </div>
    </div>`;
  }).join("");
  document.getElementById("auAdvisorBars").innerHTML = advisorHtml || "<span class='text-muted small'>No advisor data for this period.</span>";
}

// ── LOAD OUTSTANDING ──────────────────────────────────────────────
async function auLoadOutstanding() {
  const res  = await fetch(AU_URLS.outstanding);
  const data = await res.json();
  const s    = data.summary;

  // Aging pills
  document.getElementById("ag030").textContent  = s.aging_30  + " jobs";
  document.getElementById("ag3160").textContent = s.aging_60  + " jobs";
  document.getElementById("ag60p").textContent  = s.aging_60p + " jobs";

  document.getElementById("outstandSummary").innerHTML =
    "Outstanding: <strong style='color:#dc2626'>" + FMTF(s.total_outstanding) + "</strong>";

  const billingLabel = b => ({ credit:"Credit", corporate:"Corporate", insurance:"Ins." }[b] || b);

  const rows = data.items.map(r => {
    const agingCls = r.aging === "60+" ? "style='color:#b91c1c;font-weight:700;'" :
                     r.aging === "31-60" ? "style='color:#b45309;'" : "";
    return `<tr>
      <td><a href="/workshop/jobs/${r.job_no}/" class="fw-bold text-decoration-none">#${r.job_no}</a></td>
      <td style="font-size:.72rem;color:#64748b;">${r.date}</td>
      <td class="fw-semibold">${r.reg_no}</td>
      <td style="max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${r.customer}</td>
      <td><span class="au-badge ab-${r.billing}">${billingLabel(r.billing)}</span></td>
      <td class="text-end">${FMTF(r.billed)}</td>
      <td class="text-end" style="color:#16a34a;">${FMTF(r.received)}</td>
      <td class="text-end fw-bold" style="color:#dc2626;">${FMTF(r.outstanding)}</td>
      <td class="text-center" ${agingCls}>${r.days}d</td>
    </tr>`;
  }).join("");
  document.getElementById("auOutstandingBody").innerHTML =
    rows || "<tr><td colspan='9' class='text-center text-muted py-3'>All accounts clear ✓</td></tr>";
}

// ── LOAD INSTALLMENTS ─────────────────────────────────────────────
async function auLoadInstallments() {
  const res  = await fetch(AU_URLS.installments);
  const data = await res.json();

  // Aging
  const ag = data.aging || {};
  document.getElementById("iag030").textContent  = FMT(ag["0_30"]  || 0);
  document.getElementById("iag3160").textContent = FMT(ag["31_60"] || 0);
  document.getElementById("iag60p").textContent  = FMT(ag["60p"]   || 0);

  // Due today
  document.getElementById("dueTodayCount").textContent = data.due_today.length;
  document.getElementById("dueTodayList").innerHTML = data.due_today.length
    ? data.due_today.map(s =>
        `<div class="d-flex justify-content-between align-items-center py-1 border-bottom">
          <div>
            <span class="fw-semibold">${s.customer}</span>
            <span class="text-muted ms-1" style="font-size:.68rem;">#${s.deal_no} slot ${s.slot}</span>
          </div>
          <span class="fw-bold text-warning">${FMTF(s.due_amount)}</span>
        </div>`).join("")
    : "<span class='text-muted' style='font-size:.74rem;'>No installments due today</span>";

  // Overdue
  document.getElementById("overdueCount").textContent = data.overdue.length;
  document.getElementById("overdueList").innerHTML = data.overdue.length
    ? data.overdue.map(s =>
        `<div class="d-flex justify-content-between align-items-center py-1 border-bottom">
          <div>
            <span class="fw-semibold">${s.customer}</span>
            <span class="text-muted ms-1" style="font-size:.67rem;">${s.days}d overdue</span>
          </div>
          <span class="fw-bold text-danger">${FMTF(s.due_amount)}</span>
        </div>`).join("")
    : "<span class='text-success' style='font-size:.74rem;'>✓ No overdue installments</span>";

  // Recent payments
  const pmtsRows = (data.recent_pmts || []).map(p =>
    `<tr>
      <td class="fw-bold">#${p.deal_no}</td>
      <td style="max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${p.customer}</td>
      <td style="font-size:.71rem;color:#64748b;">${p.date}</td>
      <td class="text-end fw-bold" style="color:#16a34a;">${FMTF(p.amount)}</td>
    </tr>`).join("");
  document.getElementById("auRecentPmtsBody").innerHTML =
    pmtsRows || "<tr><td colspan='4' class='text-center text-muted py-2'>No collections this month</td></tr>";
}

// ── LOAD RECENT JOBS ──────────────────────────────────────────────
async function auLoadRecent() {
  const res  = await fetch(AU_URLS.recent);
  const data = await res.json();

  const rows = data.items.map(j => {
    const sm = STATUS_META[j.status]  || {};
    const bm = BILLING_META[j.billing] || { label: j.billing, cls: "ab-draft" };
    return `<tr>
      <td><a href="/workshop/jobs/${j.job_no}/" class="fw-bold text-decoration-none">#${j.job_no}</a></td>
      <td class="fw-semibold">${j.reg_no}</td>
      <td><span class="au-badge ${bm.cls}">${bm.label}</span></td>
      <td><span class="au-badge ${sm.cls || 'ab-draft'}">${sm.label || j.status}</span></td>
      <td class="text-end fw-bold">${j.net_amount ? FMTF(j.net_amount) : "—"}</td>
    </tr>`;
  }).join("");
  document.getElementById("auRecentJobsBody").innerHTML =
    rows || "<tr><td colspan='5' class='text-center text-muted py-2'>No recent jobs</td></tr>";
}

// ── LOAD TOP CUSTOMERS ────────────────────────────────────────────
async function auLoadCustomers() {
  const res  = await fetch(AU_URLS.customers + "?" + auGetRange());
  const data = await res.json();
  const maxBal = Math.max(...(data.ar_items || []).map(c => c.balance), 1);

  const html = (data.ar_items || []).map(c => {
    const pct = Math.round(c.balance / maxBal * 100);
    return `<div class="px-2 py-1 border-bottom">
      <div class="d-flex justify-content-between align-items-center">
        <span class="fw-semibold" style="font-size:.78rem;">${c.name}</span>
        <span class="fw-bold" style="color:#dc2626;font-size:.78rem;">${FMTF(c.balance)}</span>
      </div>
      <div class="au-prog mt-1">
        <div class="au-prog-bar" style="width:${pct}%;background:#dc2626;"></div>
      </div>
    </div>`;
  }).join("");
  document.getElementById("auTopArList").innerHTML =
    html || "<div class='text-center text-muted py-3 small'>No outstanding balances</div>";
}

// ── REFRESH ALL ───────────────────────────────────────────────────
async function auRefreshAll() {
  await Promise.all([
    auLoadSummary(),
    auLoadChart(),
    auLoadJobs(),
    auLoadOutstanding(),
    auLoadInstallments(),
    auLoadRecent(),
    auLoadCustomers(),
  ]);
}

// ── INIT ──────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", function () {
  auInitDates();
  auRefreshAll();

  // Auto-refresh every 2 minutes
  setInterval(auRefreshAll, 120_000);
});
</script>